<template>
    <div>
        <van-nav-bar title="用户登陆" left-text="返回"  class="leader"  left-arrow @click-left="handleBack">
            <template #right >
               <van-icon name="ellipsis" size='26px' color='#333' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
               <Pulltab 
                v-if="ShowHidden" 
                @click.stop=""
               />
            </template>
        </van-nav-bar>
        <van-form @submit="onSubmit" >
            <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="请输入您的用户名"
                :rules="[{ required: true,pattern:/^[\u4E00-\u9FFF]+$/}]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="请输入密码"
                :rules="[{ required: true,pattern:/^(?:(?!\s).){6,}$/ }]"  
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" class="login">登陆</van-button>
            </div>
        </van-form>
        <van-checkbox v-model="checked" shape="square" checked-color="#00D2C3" class="checkBox">自动登录</van-checkbox>
        <span class="free-reg forget">
          <router-link to="/register">免费注册</router-link>
        </span>
        <span class="forget">丨忘记密码</span>
    </div>
</template>

<script>
import Pulltab from '../components/Pulltab.vue'
    export default {
      components: {
        Pulltab
      },
  data() {
    return {
      username: '',
      password: '',
      checked:true,
     ShowHidden: false
    };
  },
  methods: {
      onSubmit(values) {
        console.log('submit', values);
        this.$store.dispatch('users/loginAct',values)
      },
      HiddenClick () {
        this.ShowHidden = false
      },
      handleBack(){
        this.$router.push('/')
      }
  },
    mounted () {
      document.addEventListener('click', this.HiddenClick)
    },
};
</script>

<style src="../assets/css/login.css"  scoped></style>
<style scoped>
::v-deep .van-nav-bar .van-icon{
    color:#333;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #333;
    font-size: 16px;
}
</style>

